<template>
  <div class="container">
    <img
      class="slogon center"
      :src="require('@/assets/page3/slogon.png')"
      alt=""
    />
    <div class="form-container center">
      <div class="input-wrapper flex">
        姓名：<input type="text" class="flex-1" v-model="form.name" />
      </div>
      <div class="input-wrapper flex">
        电话：<input type="text" class="flex-1" v-model="form.mobile" />
      </div>
      <div class="input-wrapper flex">
        邮寄地址：<input class="flex-1" type="text" v-model="form.address" />
      </div>
      <img class="text1" :src="require('@/assets/page3/text1.png')" alt="" />
      <div class="">
        <span @click="checked = !checked" class="checkbox">
          <span v-if="checked">
            <svg
              t="1619455034726"
              class="icon"
              viewBox="0 0 1229 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2536"
              width="16"
              height="16"
            >
              <path
                d="M512.283136 1023.998976a102.399693 102.399693 0 0 1-72.703782-29.695911l-409.598771-409.598771a102.399693 102.399693 0 0 1 145.407564-145.407564l325.631023 326.65502L1044.761539 40.961925a102.399693 102.399693 0 1 1 163.839508 122.879631l-614.398157 819.197543a102.399693 102.399693 0 0 1-74.751775 40.959877z"
                fill="#ffffff"
                p-id="2537"
              ></path>
            </svg>
          </span>
        </span>
        <img class="text2" :src="require('@/assets/page3/text2.png')" alt="" />
      </div>
      <div class="text2-container">
        <span @click="rchecked = !rchecked" class="checkbox">
          <span v-if="rchecked">
            <svg
              t="1619455034726"
              class="icon"
              viewBox="0 0 1229 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2536"
              width="16"
              height="16"
            >
              <path
                d="M512.283136 1023.998976a102.399693 102.399693 0 0 1-72.703782-29.695911l-409.598771-409.598771a102.399693 102.399693 0 0 1 145.407564-145.407564l325.631023 326.65502L1044.761539 40.961925a102.399693 102.399693 0 1 1 163.839508 122.879631l-614.398157 819.197543a102.399693 102.399693 0 0 1-74.751775 40.959877z"
                fill="#ffffff"
                p-id="2537"
              ></path>
            </svg>
          </span>
        </span>
        <img
          class="read-1"
          :src="require('@/assets/page3/read_1.png')"
          alt=""
        />
        <img
          class="read-2"
          :src="require('@/assets/page3/read_2.png')"
          alt=""
          @click="gotoPage8"
        />
      </div>
    </div>

    <img
      class="submit-btn center"
      @click="handleSumbit"
      :src="require('@/assets/submit_btn.png')"
      alt=""
    />
    <img
      class="text3 center"
      :src="require('@/assets/page3/text3.png')"
      alt=""
    />
    <InsiBtn />
    <img
      class="text5 center"
      :src="require('@/assets/page3/text5.png')"
      alt=""
    />
    <img class="bg" :src="require('@/assets/page3/bg.png')" alt="" />
  </div>
</template>

<script>
import InsiBtn from './InsiBtn';
import service from '@/service';
export default {
  name: 'HelloWorld',
  components: {
    InsiBtn,
  },
  data() {
    return {
      checked: true,
      rchecked: true,
      form: {
        name: '',
        mobile: '',
        address: '',
      },
    };
  },
  methods: {
    validate() {
      if (!this.form.name) {
        this.$toast('请填写姓名', {
          durtaion: 200,
        });
        return false;
      }
      if (!this.form.mobile) {
        this.$toast('请填写电话', {
          durtaion: 200,
        });
        return false;
      }
      if (!this.isPoneAvailable(this.form.mobile)) {
        this.$toast('电话号码格式不正确', {
          durtaion: 200,
        });
        return false;
      }
      if (!this.form.address) {
        this.$toast('请填写邮寄地址', {
          durtaion: 200,
        });
        return false;
      }
      if (!this.checked) {
        this.$toast('请同意', {
          durtaion: 200,
        });
        return false;
      }
      if (!this.rchecked) {
        this.$toast('请同意', {
          durtaion: 200,
        });
        return false;
      }
      return true;
    },
    handleSumbit() {
      if (this.validate()) {
        service.productClaim(this.form).then((res) => {
          if (res) {
            this.$router.push('/page4');
          }
        });
      }
    },
    isPoneAvailable(telephone) {
      var myreg = /^1[0-9]{10}$/;

      if (!myreg.test(telephone)) {
        console.log(telephone);
        return false;
      } else {
        return true;
      }
    },
    gotoPage8() {
      this.$router.push('/Page8');
    },
  },
};
</script>

<style lang='scss' scoped>
@import '../styles/function.scss';
.slogon {
  width: switchwidth(941);
  margin-top: switchwidth(58);
  margin-bottom: switchwidth(52);
}
.form-container {
  width: switchwidth(750);
}
.input-wrapper {
  height: switchwidth(86);
  line-height: switchwidth(86);
  border: 1px solid #fa8d9e;
  border-radius: 7px;
  color: #686868;
  padding-left: switchwidth(23);
  padding-right: switchwidth(23);
  margin-bottom: switchwidth(27);
  input {
    border: none;
    outline: none;
  }
}
.text1 {
  width: switchwidth(478);
  margin-bottom: switchwidth(43);
  display: block;
}
.text2 {
  height: switchwidth(26);
}
.read-1 {
  height: switchwidth(26);
}
.read-2 {
  height: switchwidth(30);
}
.text3 {
  width: switchwidth(1100);
  margin-bottom: switchwidth(40);
}
.text5 {
  width: switchwidth(441);
  margin-top: switchwidth(53);
  padding-bottom: switchwidth(50);
}
.container {
  position: relative;
}
.bg {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.checkbox {
  width: 8px;
  height: 8px;
  display: inline-block;
  border: solid 1px #fa8d9e;
  margin-right: 3px;
  position: relative;
  background: #fa8d9e;
}

.text2-container {
  margin-bottom: switchwidth(63);
  display: flex;
  margin-top: 5px;
}
svg {
  position: absolute;
  transform: scale(0.4);
  top: -4px;
  left: -4px;
  z-index: 1;
  font-weight: bold;
}
</style>
